<script src='${rc.getContextPath()}/manage/js/fullcalendar/lang/${lan}.js?v=${ver}'></script>
<link href='${rc.getContextPath()}/manage/js/fullcalendar/fullcalendar.css?v=${ver}' rel='stylesheet' />
<link href='${rc.getContextPath()}/manage/js/fullcalendar/fullcalendar.print.css?v=${ver}' rel='stylesheet' media='print' />
<style>
#cal {
    margin: 0 auto;
    width: 100%;
}

.pl {
    width: 250px;
    border-style: solid;
    border-width: 0 1px 1px 0px;
    border-color: #d8dfe5;
    background: #fff;
    float: left;
}

.plHeader {
    display: block;
    height: 30px;
    padding-left: 5px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #d8dfe5;
    background-color: #fafcfc;
}

.plHeader h1 {
    line-height: 30px;
    text-align: left;
    padding-left: 5px;
}

.plbar {
    display: block;
    overflow: hidden;
    height: 30px;
    background-repeat: repeat-x;
    border: none;
    background-color: #f2f5f7;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
}

.taskTable {
    
}

.taskTable tr th {
    text-align: left;
    padding: 0px 10px;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    white-space: nowrap;
    line-height: 26px;
    border-color: #DFE4E8;
    background-color: #FAFCFC;
    color: #797E80;
    font-weight: bold;
    height: 26px;
}

.taskTable tr td {
    text-align: left;
    overflow: hidden;
    padding: 0px 10px;
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
    cursor: pointer;
}

.detail {
margin-left: 250px;
}

.normalEvenTD {
    background: #DFD8D8;
}

.normalOddTD {
    background: #FFFFFF;
}

.hoverTD {
    background-color: #f5fafa;
}

.trSelected {
    background-color: #d2eafa;
}
</style>
<div>
    <div id='cal'></div>
    <div>
        <div class="pl">
            <input type="hidden" id="currDate" />
            <div class="plbar" ></div>
            <table id="taskTable" class="taskTable" width="100%" layoutH="300">
                <thead>
                    <tr>
                        <th><@label key="taskStatistics.C,colon">任务统计</@label></th>
                    </tr>
                <tbody>
                    <tr id="totaltr" class="trSelected" rel="total" onclick="taskCalJs.viewTaskDetail(this);">
                        <td id="total"><@label key="taskTotal.C,colon">维护任务总数：</@label></td>
                    </tr>
                    <tr rel="plan" onclick="taskCalJs.viewTaskDetail(this);">
                        <td id="plan"><@label key="taskPlan.C,colon">计划中：</@label></td>
                    </tr>
                    <tr rel="execute" onclick="taskCalJs.viewTaskDetail(this);">
                        <td id="execute"><@label key="taskExecute.C,colon">执行中：</@label></td>
                    </tr>
                    <tr rel="cancel" onclick="taskCalJs.viewTaskDetail(this);">
                        <td id="cancel"><@label key="taskCancel.C,colon">取消：</@label></td>
                    </tr>
                    <tr rel="done" onclick="taskCalJs.viewTaskDetail(this);">
                        <td id="done"><@label key="taskDone.C,colon">已完成：</@label></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="detail">
            <div class="panelBar" style="border-width: 0 0 1px 0;">
                <ul class="toolBar">
                    <li><a class="icon" target="dialog" mask="true" width="640" height="600" preevent="taskCalJs.checkInputButtonEnable" rel="task_tab" href="${rc.getContextPath()}/manage/maintainTask/viewMaintainTask?id={task_code}&navTabId=${navTabId!''}" title="<@label key='viewMaintainTask.D'>维护任务详情</@label>"><span><@label key="view.B">详情</@label></span> </a></li>
                </ul>
            </div>
            <div id="taskDetailTable"></div>

        </div>
    </div>
</div>

<script>
    // 对Date的扩展，将 Date 转化为指定格式的String   
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
    // 例子：   
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
    Date.prototype.Format = function(fmt) { //author: meizz   
        var o = {
            "M+" : this.getMonth() + 1, //月份   
            "d+" : this.getDate(), //日   
            "h+" : this.getHours(), //小时   
            "m+" : this.getMinutes(), //分   
            "s+" : this.getSeconds(), //秒   
            "q+" : Math.floor((this.getMonth() + 3) / 3), //季度   
            "S" : this.getMilliseconds()
        //毫秒   
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
        for ( var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    var taskCalJs = {
            appendTaskDetail:function(_orderDetail) {
        $("#taskDetailTable", navTab.getCurrentPanel()).empty();
        var ht = "<table id='taskDetail' class='table' width='100%' layoutH='358' style='overflow: scroll;'>"
                + "<thead><tr>"
                + "<th width='40'><@label key='serialNumber.C'>序号</@label></th>"
                + "<th width='100' orderField='taskCode'><@label key='taskCode.C'>equipmentCode任务编号</@label></th>"
                + "<th width='100' orderField='equipmentCode'><@label key='equipmentCode.C'>设备编号</@label></th>"
                + "<th width='100' orderField='equipmentText'><@label key='equipmentText.C'>设备描述</@label></th>"
                + "<th width='100' orderField='strategyCode'><@label key='strategyCode.C'>维护策略编号</@label></th>"
                + "<th width='100' orderField='strategyText'><@label key='strategyText.C'>维护策略描述</@label></th>"
                + "<th width='100' orderField='plannedMaintainDate'><@label key='plannedMaintainDate.C'>计划维护日期</@label></th>"
                + "<th width='100' orderField='maintainStartDateTime'><@label key='maintainStartDateTime.C'>实际维护开始时间</@label></th>"
                + "<th width='100' orderField='maintainEndDateTime'><@label key='maintainEndDateTime.C'>实际维护结束时间</@label></th>"
                + "<th width='100' orderField='statusECode'><@label key='statusECode.C'>任务状态</@label></th>"
                + "</tr></thead>" + "<tbody>";
        for ( var i = 0; i < _orderDetail.length; i++) {
            ht += "<tr target='task_code' rel='"+_orderDetail[i].taskCode+"'>"
                    + "<td >"
                    + (i + 1)
                    + "</td>"
                    + "<td>"
                    + _orderDetail[i].taskCode
                    + "</td>"
                    + "<td>"
                    + _orderDetail[i].equipmentCode
                    + "</td>"
                    + "<td >"
                    + ((typeof(_orderDetail[i].equipmentText) ==  'undefined' )?'':_orderDetail[i].equipmentText)
                    + "</td>"
                    + "<td>"
                    + ((typeof(_orderDetail[i].strategyCode) ==  'undefined' )?'':_orderDetail[i].strategyCode)
                    + "</td>"
                    + "<td>"
                    + ((typeof(_orderDetail[i].strategyText) ==  'undefined' )?'':_orderDetail[i].strategyText)
                    + "</td>"
                    + "<td>"
                    + new Date(_orderDetail[i].plannedMaintainDate).Format("yyyy-MM-dd")
                    + "</td>"
                    + "<td>";
                    var start=(typeof(_orderDetail[i].maintainStartDateTime) ==  'undefined' )?'':new Date(_orderDetail[i].maintainStartDateTime).Format("yyyy-MM-dd hh:mm:ss");
                    ht+=start+ "</td>"
                    + "<td>";
                    var end=(typeof(_orderDetail[i].maintainEndDateTime) ==  'undefined' )?'':new Date(_orderDetail[i].maintainEndDateTime).Format("yyyy-MM-dd hh:mm:ss");
                    ht+=end+"</td>"
                    + "<td>"
                    + _orderDetail[i].statusECodeText + "</td>" + "</tr>";
        }
        if(_orderDetail.length==0)
            {
            ht+="<tr target='task_code'><td colspan='6' class='noData'>======<@label key='noListData.C'>列表无数据</@label>=====</td></tr>"
            }
        ht += "</tbody></table>";

        $("#taskDetailTable", navTab.getCurrentPanel()).append(ht);
        $("#taskDetail", navTab.getCurrentPanel()).jTable();
         $(".grid",navTab.getCurrentPanel()).find("[layoutH]").layoutH();
    },
    viewTaskDetail:function(node) {
        var type = $(node, $.pdialog.getCurrent()).attr("rel");
        if (type != '' && type != null) {
            var day = $('#currDate', navTab.getCurrentPanel()).val();
            $.DWZajax({
                url : hostUrl + "/maintainTask/viewTaskDetail",
                data : {
                    'type' : type,
                    'date' : day
                },
                callback : function(data) {
                    var taskDetail = eval("(" + data + ")");
                    if (data != null) {
                        taskCalJs.appendTaskDetail(taskDetail);
                    }
                }
            });
        }

    },
    
    selectDay:function()
    {
        var day = $('#currDate', navTab.getCurrentPanel()).val();
        var mydate=new Date(day);
        var today = new Array("<@label key='sunday.C'>星期日</@label>", "<@label key='Mon.C'>星期一</@label>", "<@label key='Tues.C'>星期二</@label>", "<@label key='Wed.C'>星期三</@label>",
                "<@label key='Thur.C'>星期四</@label>", "<@label key='Fri.C'>星期五</@label>", "<@label key='Sat.C'>星期六</@label>");
        var week = today[mydate.getDay()];
        $('.plbar', navTab.getCurrentPanel()).html(day + " " + week);
        $.DWZajax({
            url : hostUrl + "/maintainTask/selectDay",
            data : {
                'date' : day
            },
            callback : function(data) {
                var taskDetail = eval("(" + data + ")");
                if (data != null) {
                    taskCalJs.appendCountDetail(taskDetail);
                }
                taskCalJs.viewTaskDetail($('#totaltr', navTab.getCurrentPanel()));
            }
        });
    },
    appendCountDetail:function(taskDetail) {
        $('#total', navTab.getCurrentPanel()).html("<@label key='taskTotal.C,colon'>维护任务总数：</@label>"+taskDetail.total);
        $('#plan', navTab.getCurrentPanel()).html("<@label key='taskPlan.C,colon'>计划中：</@label>"+taskDetail.plan);
        $('#execute', navTab.getCurrentPanel()).html("<@label key='taskExecute.C,colon'>执行中：</@label>"+taskDetail.execute);
        $('#cancel', navTab.getCurrentPanel()).html("<@label key='taskCancel.C,colon'>取消：</@label>"+taskDetail.cancel);
        $('#done', navTab.getCurrentPanel()).html("<@label key='taskDone.C,colon'>已完成：</@label>"+taskDetail.done);
    },
    inputEnable : true,
    checkInputButtonEnable:function(){
        var id = $("#task_code", navTab.getCurrentPanel()).val();
        taskCalJs.inputEnable = true;
        if(id && id!=""){
            $.ajax({
                async : false,
                dataType : "json",
                url:hostUrl +"/maintainTask/checkedTaskView",
                data:{'taskCode':id},
                success:function(data){
                    if(data.statusCode == DWZ.statusCode.error){
                        taskCalJs.inputEnable = false;
                        alertMsg.error(data.message);
                    }
                }
            });
        }
        return taskCalJs.inputEnable;
    }
    
    };

    
    $(function() {
        var mydate = new Date();
        var day = mydate.Format("yyyy-MM-dd");
        $('#currDate', navTab.getCurrentPanel()).val(day);
        taskCalJs.selectDay();
        $('#cal').fullCalendar({
            header : {
                left : '',
                center : 'prev,title,next,today',
                right : ''
            },
            height : 300,
            firstDay : 1,
            selectable : true,
            selectHelper : true,
            unselectAuto : false,
            editable : false,
            eventLimit : true,
            dayClick : function(date, jsEvent, view) {
                $('#currDate', navTab.getCurrentPanel()).val(date.format());
                taskCalJs.selectDay();
            },
            eventClick : function(calEvent, jsEvent, view) {
                $('#cal').fullCalendar('select', calEvent.start.format());
                $('#currDate', navTab.getCurrentPanel()).val(calEvent.start.format());
                taskCalJs.selectDay();
            },
            events : {
                url : '${rc.getContextPath()}/manage/maintainTask/getEvents',
                cache : true
            }
        });
        $('#cal').fullCalendar('select', day);
        $('.fc-next-button').click(function() {
            var day = new Date();
            var mydate = new Date(day.Format("yyyy-MM-dd"));
            mydate.setYear(mydate.getYear() + 1900 + 1);
            var view = $('#cal').fullCalendar('getView');
            var d = new Date(view.intervalStart);
            if (d > mydate) {
                alertMsg.warn("<@label key='calOnlyOneYear.C'>只能查看未来一年以内的计划</@label>");
                $('#cal').fullCalendar('prev');
            }
        });
        $('.fc-today-button').click(function() {
            var mydate = new Date();
            var day = mydate.Format("yyyy-MM-dd");
            $('#cal').fullCalendar('select', day);
            $('#currDate', navTab.getCurrentPanel()).val(day);
            taskCalJs.selectDay();
        });
        ///////datagrid选中行变色与鼠标经过行变色/////////////// 
        var dtSelector = ".taskTable";
        var tbList = $(dtSelector);

        tbList.each(function() {
            var self = this;
            // 鼠标经过的行变色 
            $("tr:not(:first)", $(self)).hover(function() {
                $(this).addClass('hoverTD');
                $(this).removeClass('table-td-content');
            }, function() {
                $(this).removeClass('hoverTD');
                $(this).addClass('table-td-content');
            });

            // 选择行变色 
            $("tr", $(self)).click(function() {
                var trThis = this;
                $(self).find(".trSelected").removeClass('trSelected');
                if ($(trThis).get(0) == $("tr:first", $(self)).get(0)) {
                    return;
                }
                $(trThis).addClass('trSelected');
            });
        });
    });
</script>